<template>
  <div class="mentor-management">
    <el-button type="primary" @click="handleAdd">添加导师/辅导员</el-button>
    <el-table :data="mentors" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column label="负责班级">
        <template #default="scope">
          <el-tag
            v-for="cls in scope.row.classes"
            :key="cls"
            style="margin-right: 5px"
          >
            {{ getClassName(cls) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="handleAssign(scope.row)">分配班级</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type">
            <el-option label="毕业导师" value="毕业导师" />
            <el-option label="辅导员" value="辅导员" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>

    <!-- 分配班级对话框 -->
    <el-dialog v-model="assignDialogVisible" title="分配班级">
      <el-transfer
        v-model="selectedClasses"
        :data="classOptions"
        :titles="['可选班级', '已选班级']"
      />
      <template #footer>
        <el-button @click="assignDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAssignSubmit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mentors: [], // 导师/辅导员列表
      classes: [], // 班级列表
      dialogVisible: false, // 添加/编辑对话框是否显示
      assignDialogVisible: false, // 分配班级对话框是否显示
      dialogTitle: '添加导师/辅导员', // 对话框标题
      form: {
        id: '',
        name: '',
        type: '',
        email: '',
        phone: '',
        classes: []
      },
      selectedClasses: [], // 已选班级
      selectedMentor: null // 当前操作的导师/辅导员
    }
  },
  computed: {
    // 班级选项
    classOptions() {
      return this.classes.map(cls => ({
        key: cls.id,
        label: cls.name
      }))
    }
  },
  methods: {
    // 获取班级名称
    getClassName(classId) {
      const cls = this.classes.find(item => item.id === classId)
      return cls ? cls.name : ''
    },
    // 添加导师/辅导员
    handleAdd() {
      this.dialogTitle = '添加导师/辅导员'
      this.form = { id: '', name: '', type: '', email: '', phone: '', classes: [] }
      this.dialogVisible = true
    },
    // 编辑导师/辅导员
    handleEdit(row) {
      this.dialogTitle = '编辑导师/辅导员'
      this.form = { ...row }
      this.dialogVisible = true
    },
    // 删除导师/辅导员
    handleDelete(row) {
      this.mentors = this.mentors.filter(item => item.id !== row.id)
      this.$message.success('删除成功')
    },
    // 提交表单
    handleSubmit() {
      if (this.form.id) {
        // 编辑
        const index = this.mentors.findIndex(item => item.id === this.form.id)
        this.mentors.splice(index, 1, this.form)
      } else {
        // 添加
        this.form.id = Date.now().toString()
        this.mentors.push(this.form)
      }
      this.dialogVisible = false
      this.$message.success('操作成功')
    },
    // 分配班级
    handleAssign(row) {
      this.selectedMentor = row
      this.selectedClasses = [...row.classes]
      this.assignDialogVisible = true
    },
    // 提交分配班级
    handleAssignSubmit() {
      this.selectedMentor.classes = this.selectedClasses
      this.assignDialogVisible = false
      this.$message.success('分配成功')
    }
  },
  mounted() {
    // 模拟数据
    this.mentors = [
      {
        id: '1',
        name: '导师1',
        type: '毕业导师',
        email: 'mentor1@example.com',
        phone: '1234567890',
        classes: ['2101', '2102']
      },
      {
        id: '2',
        name: '辅导员1',
        type: '辅导员',
        email: 'counselor1@example.com',
        phone: '0987654321',
        classes: ['2103', '2104']
      }
    ]
    this.classes = [
      { id: '2101', name: '2101班' },
      { id: '2102', name: '2102班' },
      { id: '2103', name: '2103班' },
      { id: '2104', name: '2104班' }
    ]
  }
}
</script>

<style scoped>
.mentor-management {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
